<template>

    <div id="table-check" class="my-checkbox">

    </div>

    <table class="table table-bordered table-all" data-pagination="true" data-advanced-sortable="true"
           data-page-size="5" data-page-list="[5]" ref="table" id="table">

    </table>

</template>

<script>
    export default {
        name: "myTable",
        mounted() {
            let head = [
                {field: "photo", title: "Photo"},
                {field: "name", title: "Name"},
                {field: "latin", title: "Latin Name"},
                {field: "classes", title: "分类"},
                {field: "family", title: "Family"},
                {field: "familyLatin", title: "Family Latin"},
                {field: "genus", title: "Genus"},
                {field: "genusLatin", title: "Genus Latin"},
                {field: "location", title: "Distribution area"},
                {field: "area", title: "Population suitable growth area"}
            ];

            getCheckbox(head, "table")

            $(this.$refs.table).bootstrapTable({
                classes: "table table-bordered",
                columns: [
                    {
                        field: "photo",
                        title: "Photo",
                        align: "center",
                        formatter: function (value, rows) {
                            return `<a data-fancybox="group" href="/PTSG/images/getPhoto/${rows.id}"><img src="/PTSG/images/getPhoto/${rows.id}" style="width: 200px;max-height: 200px"/></a>`
                        }
                    }, {
                        field: "name",
                        title: "Name",
                        sortable: "true",
                        searchType: "text",
                        formatter: function (value, rows) {
                            return `<a href="#/PTSG/germ/germInfo/${rows.id}" target="_blank">${value}</a>`
                        }
                    }, {
                        field: "latin",
                        title: "Latin Name",
                        sortable: "true",
                        searchType: "text"
                    }, {
                        field: "classes",
                        title: "分类",
                        sortable: "true",
                        searchType: "checkbox",
                        searchSelect: ["红木类树种", "常绿硬木类树种", "落叶硬木类树种", "针叶类树种"]

                    }, {
                        field: "family",
                        title: "Family",
                        sortable: "true",
                        searchType: "text"
                    }, {
                        field: "familyLatin",
                        title: "Family Latin",
                        sortable: "true",
                        searchType: "text"
                    },
                    {
                        field: "genus",
                        title: "Genus",
                        sortable: "true",
                        searchType: "text"
                    },
                    {
                        field: "genusLatin",
                        title: "Genus Latin",
                        sortable: "true",
                        searchType: "text"
                    },
                    {
                        field: "location",
                        title: "Distribution area",
                        sortable: "true",
                        searchType: "text"
                    },
                    {
                        field: "area",
                        title: "Population suitable growth area",
                        sortable: "true",
                        searchType: "text"
                    }
                ]
            })


        }
    }
</script>

<style lang="scss">
    .my-checkbox {
        margin-top: 30px;
    }

    .table-all {
        background-color: white;
        white-space: nowrap;
    }
</style>